<template>
  <div class="app-container">
    <!-- 头部信息卡片 -->
    <el-card class="header-card">
      <div class="header-content">
        <div class="header-left">
          <h2 class="task-title">工序一任务</h2>
          <p class="task-code">{{ taskInfo.taskCode || 'SCRW2026251548' }}</p>
          <div class="task-meta">
            <span>创建人：{{ taskInfo.createBy || '李小明' }}</span>
            <span style="margin-left: 20px;">创建时间：{{ formatDate(taskInfo.createTime) || '2025-07-18 09:46:51' }}</span>
          </div>
          <div class="progress-section">
            <span>任务进度：</span>
            <el-progress 
              :percentage="taskProgress" 
              :color="progressColor"
              :stroke-width="8"
              style="width: 300px; margin-left: 10px;"
            />
            <span style="margin-left: 10px;">合格/计划：{{ qualifiedQty }}/{{ plannedQty }}</span>
          </div>
          <div class="action-buttons">
            <el-button size="small" type="primary" v-if="taskInfo.status === '0'">开工</el-button>
            <el-button size="small" type="warning" v-if="taskInfo.status === '2'">关闭</el-button>
            <el-button size="small" type="success" v-if="taskInfo.status === '2'">完成</el-button>
            <el-button size="small">打印</el-button>
          </div>
        </div>
        <div class="header-right">
          <div class="status-badge" :class="statusClass">
            {{ statusText }}
          </div>
        </div>
      </div>
    </el-card>

    <!-- 标签页内容 -->
    <el-card class="content-card">
      <el-tabs v-model="activeTab" type="card">
        <!-- 基础信息 -->
        <el-tab-pane label="基础信息" name="basic">
          <div class="info-section">
            <h3 class="section-title">工单信息</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="info-item">
                  <label>工单编号：</label>
                  <span>{{ workOrderInfo.workOrderCode || 'GDBH023515' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <label>工单名称：</label>
                  <span>{{ workOrderInfo.workOrderName || '工单一' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <label>产品编号：</label>
                  <span>{{ workOrderInfo.productCode || 'CPBH15648' }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="info-item">
                  <label>产品名称：</label>
                  <span>{{ workOrderInfo.productName || '新产品一' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <label>产品型号：</label>
                  <span>{{ workOrderInfo.productModel || '半成品' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <label>规格型号：</label>
                  <span>{{ workOrderInfo.specification || '20*50*30' }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="info-item">
                  <label>单位：</label>
                  <span>{{ workOrderInfo.unit || '箱' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <label>BOM：</label>
                  <span>{{ workOrderInfo.bomCode || 'BOM0215646' }}</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="info-section">
            <h3 class="section-title">任务信息</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="info-item">
                  <label>任务编号：</label>
                  <span>{{ taskInfo.taskCode || 'RWBH0235' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <label>任务名称：</label>
                  <span>{{ taskInfo.taskName || '产品0255生产任务' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <label>工艺路线：</label>
                  <span>{{ taskInfo.processRoute || '工艺路线一' }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="info-item">
                  <label>站点名称：</label>
                  <span>{{ taskInfo.stationName || '站点一' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <label>工序名称：</label>
                  <span>{{ taskInfo.processName || '工序一' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <label>工序编号：</label>
                  <span>{{ taskInfo.processCode || 'GXBH2315' }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="info-item">
                  <label>计划数量：</label>
                  <span>{{ taskInfo.plannedQty || '50' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <label>实际生产数量：</label>
                  <span>{{ taskInfo.actualQty || '' }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="info-item">
                  <label>计划开工时间：</label>
                  <span>{{ formatDate(taskInfo.planStartTime) || '2023-04-19 20:04' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <label>计划完工时间：</label>
                  <span>{{ formatDate(taskInfo.planEndTime) || '2023-04-19 20:04' }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="info-item">
                  <label>实际开工时间：</label>
                  <span>{{ formatDate(taskInfo.actualStartTime) || '2023-06-19 20:04:48' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <label>实际完工时间：</label>
                  <span>{{ formatDate(taskInfo.actualEndTime) || '' }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>

        <!-- 派工信息 -->
        <el-tab-pane label="派工信息" name="workorder">
          <div class="info-section">
            <h3 class="section-title">任务派工</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="info-item">
                  <label>派工人员：</label>
                  <span>{{ dispatchInfo.dispatcher || '暂无' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <label>派工时间：</label>
                  <span>{{ formatDate(dispatchInfo.dispatchTime) || '暂无' }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="info-item">
                  <label>班组名称：</label>
                  <span>{{ dispatchInfo.teamName || '暂无' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <label>任务负责人：</label>
                  <span>{{ dispatchInfo.supervisor || '暂无' }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="info-item">
                  <label>其他成员：</label>
                  <span>{{ dispatchInfo.members || '暂无' }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="info-item">
                  <label>备注：</label>
                  <span>{{ dispatchInfo.remark || '' }}</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="info-section">
            <h3 class="section-title">质检派工</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="info-item">
                  <label>质检部门：</label>
                  <span>{{ qcInfo.qcDepartment || '暂无' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <label>质检人员：</label>
                  <span>{{ qcInfo.qcInspector || '暂无' }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="info-item">
                  <label>备注：</label>
                  <span>{{ qcInfo.remark || '' }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>

        <!-- 物料清单 -->
        <el-tab-pane label="物料清单" name="materials">
          <div class="material-section">
            <div class="material-tabs">
              <el-button
                type="primary"
                size="small"
                @click="handleMaterialOutbound"
              >领料出库</el-button>
              <el-button
                type="primary"
                size="small"
                @click="handleMaterialInbound"
              >退料入库</el-button>
              <el-button size="small">导出</el-button>
            </div>

            <el-table :data="materialList" style="width: 100%; margin-top: 15px;">
              <el-table-column prop="sequence" label="序号" width="80" align="center" />
              <el-table-column prop="materialCode" label="物料编号" width="120" align="center" />
              <el-table-column prop="materialName" label="物料名称" width="150" align="center" />
              <el-table-column prop="specification" label="规格型号" width="150" align="center" />
              <el-table-column prop="unit" label="单位" width="80" align="center" />
              <el-table-column prop="requiredQty" label="需求数量" width="100" align="center" />
              <el-table-column prop="usedRatio" label="用料比例" width="100" align="center" />
            </el-table>

            <div class="material-summary">
              <span>需求总量：{{ materialSummary.totalRequired || '90' }}</span>
            </div>
          </div>
        </el-tab-pane>

        <!-- 报工记录 -->
        <el-tab-pane label="报工记录" name="reports">
          <el-table :data="reportList" style="width: 100%;">
            <el-table-column prop="sequence" label="序号" width="80" align="center" />
            <el-table-column prop="reportCode" label="报工单编号" width="150" align="center" />
            <el-table-column prop="reportName" label="报工单名称" width="150" align="center" />
            <el-table-column label="报工日期" width="120" align="center">
              <template slot-scope="scope">
                {{ formatDate(scope.row.reportDate) }}
              </template>
            </el-table-column>
            <el-table-column prop="workOrderName" label="工单名称" width="120" align="center" />
            <el-table-column prop="workOrderCode" label="工单编号" width="150" align="center" />
            <el-table-column prop="taskName" label="任务名称" width="120" align="center" />
            <el-table-column prop="taskCode" label="任务编号" width="120" align="center" />
            <el-table-column prop="processRoute" label="工艺路线" width="120" align="center" />
            <el-table-column prop="processName" label="工序名称" width="120" align="center" />
            <el-table-column prop="materialInfo" label="物料信息" width="150" align="center" />
          </el-table>
          
          <div class="report-summary">
            <span>报工总数：{{ reportSummary.totalReports || '250' }}</span>
          </div>
        </el-tab-pane>

        <!-- 退料记录 -->
        <el-tab-pane label="退料记录" name="returns">
          <div class="return-section">
            <div class="return-tabs">
              <el-button size="small">导出</el-button>
            </div>
            
            <el-table :data="returnList" style="width: 100%; margin-top: 15px;">
              <el-table-column prop="sequence" label="序号" width="80" align="center" />
              <el-table-column prop="returnCode" label="退料单编号" width="150" align="center" />
              <el-table-column prop="returnName" label="退料单名称" width="150" align="center" />
              <el-table-column label="退料日期" width="120" align="center">
                <template slot-scope="scope">
                  {{ formatDate(scope.row.returnDate) }}
                </template>
              </el-table-column>
              <el-table-column prop="workOrderName" label="工单名称" width="120" align="center" />
              <el-table-column prop="workOrderCode" label="工单编号" width="150" align="center" />
              <el-table-column prop="taskName" label="任务名称" width="120" align="center" />
              <el-table-column prop="taskCode" label="任务编号" width="120" align="center" />
              <el-table-column prop="processRoute" label="工艺路线" width="120" align="center" />
              <el-table-column prop="processName" label="工序名称" width="120" align="center" />
              <el-table-column prop="materialInfo" label="物料信息" width="150" align="center" />
            </el-table>
            
            <div class="return-summary">
              <span>退料总数：{{ returnSummary.totalReturns || '250' }}</span>
            </div>
          </div>
        </el-tab-pane>

        <!-- 执行进度 -->
        <el-tab-pane label="执行进度" name="progress">
          <div class="progress-timeline">
            <div class="timeline-item" v-for="(item, index) in progressList" :key="index">
              <div class="timeline-dot"></div>
              <div class="timeline-content">
                <div class="timeline-header">
                  <span class="operator">{{ item.operator }}</span>
                  <span class="time">{{ item.time }}</span>
                </div>
                <div class="timeline-body">
                  <div class="operation-type">{{ item.operationType }}</div>
                  <div class="operation-details">
                    <div class="detail-row">
                      <span class="label">报工数量：</span>
                      <span class="value">{{ item.reportQty }}</span>
                    </div>
                    <div class="detail-row">
                      <span class="label">报工时间：</span>
                      <span class="value">{{ item.reportTime }}</span>
                    </div>
                    <div class="detail-row">
                      <span class="label">检验日期：</span>
                      <span class="value">{{ item.inspectionDate }}</span>
                    </div>
                    <div class="detail-row">
                      <span class="label">合格：</span>
                      <span class="value">{{ item.qualifiedQty }}</span>
                    </div>
                    <div class="detail-row">
                      <span class="label">不合格：</span>
                      <span class="value">{{ item.unqualifiedQty }}</span>
                    </div>
                    <div class="detail-row">
                      <span class="label">合格率：</span>
                      <span class="value">{{ item.qualificationRate }}</span>
                    </div>
                    <div class="detail-row">
                      <span class="label">检测结果：</span>
                      <span class="value">{{ item.inspectionResult }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import {
  getWorkOrderTask,
  getTaskMaterials,
  getTaskReports,
  getTaskReturns,
  getTaskProgress,
  getTaskDispatch
} from "@/api/sc/workOrderTask";
import wsClient from "@/utils/websocket";
import { formatDate } from "@/utils/index";

export default {
  name: "WorkOrderTaskDetail",
  data() {
    return {
      // 当前激活的标签页
      activeTab: 'basic',
      // 任务ID
      taskId: null,
      // 任务基础信息
      taskInfo: {},
      // 工单信息
      workOrderInfo: {},
      // 派工信息
      dispatchInfo: {},
      // 质检信息
      qcInfo: {},
      // 物料列表
      materialList: [],
      // 物料汇总
      materialSummary: {},
      // 报工记录列表
      reportList: [],
      // 报工汇总
      reportSummary: {},
      // 退料记录列表
      returnList: [],
      // 退料汇总
      returnSummary: {},
      // 执行进度列表
      progressList: [],
      // 加载状态
      loading: false
    };
  },
  computed: {
    // 任务进度百分比（支持虚拟进度）
    taskProgress() {
      if (!this.taskInfo.plannedQty || this.taskInfo.plannedQty === 0) {
        // 没有计划数量时，根据状态显示虚拟进度
        if (this.taskInfo.status === '1') return 5;   // 已派工：5%
        if (this.taskInfo.status === '2') return 15;  // 进行中：15%
        if (this.taskInfo.status === '3') return 100; // 已完成：100%
        if (this.taskInfo.status === '5') return 95;  // 待质检：95%
        return 0;
      }
      
      const completed = this.taskInfo.completedQty || 0;
      const planned = this.taskInfo.plannedQty || 1;
      
      // 如果有实际完成数量，使用实际进度
      if (completed > 0) {
        return Math.round((completed / planned) * 100);
      }
      
      // 没有实际完成数量时，根据状态显示虚拟进度
      if (this.taskInfo.status === '1') return 5;   // 已派工：5%虚拟进度
      if (this.taskInfo.status === '2') return 15;  // 进行中：15%虚拟进度
      if (this.taskInfo.status === '3') return 100; // 已完成：100%
      if (this.taskInfo.status === '5') return 95;  // 待质检：95%
      
      return 0;
    },
    // 进度条颜色
    progressColor() {
      const progress = this.taskProgress;
      if (progress === 100) return '#67C23A';
      if (progress >= 80) return '#E6A23C';
      if (progress >= 40) return '#409EFF';
      return '#F56C6C';
    },
    // 状态样式类
    statusClass() {
      const status = this.taskInfo.status;
      if (status === '0') return 'status-not-started';
      if (status === '1') return 'status-dispatched';
      if (status === '2') return 'status-in-progress';
      if (status === '3') return 'status-completed';
      if (status === '4') return 'status-paused';
      if (status === '5') return 'status-quality-check';
      return 'status-unknown';
    },
    // 状态文本
    statusText() {
      const status = this.taskInfo.status;
      if (status === '0') return '未开始';
      if (status === '1') return '已派工';
      if (status === '2') return '进行中';
      if (status === '3') return '已完成';
      if (status === '4') return '已暂停';
      if (status === '5') return '待质检';
      return '未知状态';
    },
    // 合格数量
    qualifiedQty() {
      return this.taskInfo.qualifiedQty || 0;
    },
    // 计划数量
    plannedQty() {
      return this.taskInfo.plannedQty || 50;
    }
  },
  created() {
    // 从路由参数获取任务ID
    this.taskId = this.$route.params.id || this.$route.query.id;
    if (this.taskId) {
      this.getTaskDetail();
    } else {
      this.$message.error("未找到任务ID，无法加载详情");
      this.goBack();
    }

    // 初始化WebSocket连接
    this.initWebSocket();
  },
  watch: {
    // 监听路由变化，页面重新加载时刷新数据
    '$route'(to) {
      if (to.path.includes('/sc/task/detail') || to.name === 'WorkOrderTaskDetail') {
        console.log('任务详情页面路由变化，刷新数据');
        this.taskId = to.params.id || to.query.id;
        if (this.taskId) {
          this.getTaskDetail();
        }
      }
    },
    // 监听任务ID变化
    taskId(newVal, oldVal) {
      if (newVal && newVal !== oldVal) {
        console.log('任务ID变化，刷新详情数据');
        this.getTaskDetail();
      }
    }
  },
  methods: {
    // 获取任务详情
    getTaskDetail() {
      this.loading = true;
      getWorkOrderTask(this.taskId).then(response => {
        if (response.code === 200) {
          const data = response.data || {};
          // 处理返回的数据结构
          this.taskInfo = data.taskInfo || {};
          this.workOrderInfo = data.workOrderInfo || {};
          this.dispatchInfo = data.dispatchInfo || {};
          this.qcInfo = data.qcInfo || {};

          this.processTaskData();
          // 获取其他相关数据
          this.getTaskMaterialsData();
          this.getTaskReportsData();
          this.getTaskReturnsData();
          this.getTaskProgressData();
          this.getTaskDispatchData();
        } else {
          this.$message.error(response.msg || "获取任务详情失败");
        }
        this.loading = false;
      }).catch(error => {
        console.error("获取任务详情失败:", error);
        this.$message.error("获取任务详情失败，请检查网络连接");
        this.loading = false;
      });
    },

    // 处理任务数据
    processTaskData() {
      // 处理工单信息
      if (this.taskInfo.workOrder) {
        this.workOrderInfo = this.taskInfo.workOrder;
      }

      // 处理其他数据结构
      // 根据实际API返回的数据结构进行处理
    },

    // 获取物料清单数据
    getTaskMaterialsData() {
      getTaskMaterials(this.taskId).then(response => {
        if (response.code === 200) {
          this.materialList = response.data || [];
          // 计算汇总信息
          this.materialSummary = {
            totalRequired: this.materialList.reduce((sum, item) => sum + (item.requiredQty || 0), 0),
          };
        }
      }).catch(error => {
        console.error("获取物料清单失败:", error);
        this.$message.error("获取物料清单失败");
      });
    },

    // 获取报工记录数据
    getTaskReportsData() {
      getTaskReports(this.taskId).then(response => {
        if (response.code === 200) {
          this.reportList = response.data || [];
          this.reportSummary = {
            totalReports: this.reportList.length
          };
        }
      }).catch(error => {
        console.error("获取报工记录失败:", error);
        this.$message.error("获取报工记录失败");
      });
    },

    // 获取退料记录数据
    getTaskReturnsData() {
      getTaskReturns(this.taskId).then(response => {
        if (response.code === 200) {
          this.returnList = response.data || [];
          this.returnSummary = {
            totalReturns: this.returnList.length
          };
        }
      }).catch(error => {
        console.error("获取退料记录失败:", error);
        this.$message.error("获取退料记录失败");
      });
    },

    // 获取执行进度数据
    getTaskProgressData() {
      getTaskProgress(this.taskId).then(response => {
        if (response.code === 200) {
          this.progressList = response.data || [];
        }
      }).catch(error => {
        console.error("获取执行进度失败:", error);
        this.$message.error("获取执行进度失败");
      });
    },

    // 获取派工信息数据
    getTaskDispatchData() {
      getTaskDispatch(this.taskId).then(response => {
        if (response.code === 200) {
          const data = response.data || {};
          this.dispatchInfo = data;
        }
      }).catch(error => {
        console.error("获取派工信息失败:", error);
        this.$message.error("获取派工信息失败");
      });
    },
    
    // 处理任务数据
    processTaskData() {
      // 可以在这里对任务数据进行额外处理
      console.log('任务信息:', this.taskInfo);
      console.log('工单信息:', this.workOrderInfo);
    },

    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },

    // WebSocket相关方法
    initWebSocket() {
      // 先确保没有现有的连接和监听器
      this.cleanupWebSocket();
      
      // 连接WebSocket
      wsClient.connect();

      // 监听连接成功事件
      wsClient.on('connected', () => {
        console.log('WebSocket连接成功');
        this.$message.success('实时连接已建立');
      });

      // 监听任务状态更新
      wsClient.on('task_status_update', (message) => {
        this.handleTaskStatusUpdate(message);
      });

      // 监听质检进度更新
      wsClient.on('quality_check_progress', (message) => {
        this.handleQualityCheckProgress(message);
      });

      // 监听质检完成
      wsClient.on('quality_check_complete', (message) => {
        this.handleQualityCheckComplete(message);
      });

      // 监听入库完成
      wsClient.on('inbound_complete', (message) => {
        this.handleInboundComplete(message);
      });

      // 监听连接断开
      wsClient.on('disconnected', () => {
        console.log('WebSocket连接断开');
        this.$message.warning('实时连接已断开');
      });

      // 监听连接错误
      wsClient.on('error', (error) => {
        console.error('WebSocket连接错误:', error);
        this.$message.error('实时连接出现错误');
      });
    },

    // 清理WebSocket相关资源
    cleanupWebSocket() {
      if (wsClient) {
        // 移除所有事件监听器
        wsClient.removeAllListeners();
        
        // 关闭WebSocket连接
        wsClient.close();
      }
    },

    // 处理任务状态更新
    handleTaskStatusUpdate(message) {
      const data = message.data;
      if (data && data.taskId == this.taskId) {
        console.log('收到任务状态更新:', data);

        // 更新任务状态
        this.taskInfo.status = data.newStatus;

        // 显示状态变更通知
        this.$notify({
          title: '任务状态更新',
          message: message.message,
          type: 'info',
          duration: 3000
        });

        // 刷新任务详情
        this.getTaskDetail();
      }
    },

    // 处理质检进度更新
    handleQualityCheckProgress(message) {
      const data = message.data;
      if (data && data.taskId == this.taskId) {
        console.log('收到质检进度更新:', data);

        this.$notify({
          title: '质检进度',
          message: message.message,
          type: 'info',
          duration: 3000
        });
      }
    },

    // 处理质检完成
    handleQualityCheckComplete(message) {
      const data = message.data;
      if (data && data.taskId == this.taskId) {
        console.log('收到质检完成通知:', data);

        const isQualified = data.result === '1';
        this.$notify({
          title: '质检完成',
          message: message.message,
          type: isQualified ? 'success' : 'error',
          duration: 5000
        });
      }
    },

    // 处理入库完成
    handleInboundComplete(message) {
      const data = message.data;
      if (data && data.taskId == this.taskId) {
        console.log('收到入库完成通知:', data);

        this.$notify({
          title: '入库完成',
          message: message.message,
          type: 'success',
          duration: 3000
        });

        // 刷新任务详情
        this.getTaskDetail();
      }
    },
    /** 格式化日期时间 */
    formatDate(cellValue) {
      return formatDate(cellValue);
    }
  },

  // 组件销毁时关闭WebSocket连接
  beforeDestroy() {
    this.cleanupWebSocket();
  },

  // 组件激活时重新连接
  activated() {
    this.initWebSocket();
  },

  // 组件停用时清理连接
  deactivated() {
    this.cleanupWebSocket();
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-left {
  flex: 1;
}

.task-title {
  margin: 0 0 5px 0;
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.task-code {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #909399;
}

.task-meta {
  margin-bottom: 15px;
  font-size: 14px;
  color: #606266;
}

.progress-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.header-right {
  display: flex;
  align-items: center;
}

.status-badge {
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: bold;
  border: 2px solid;
}

.status-not-started {
  background-color: #f4f4f5;
  color: #909399;
  border-color: #d3d4d6;
}

.status-dispatched {
  background-color: #e1f3d8;
  color: #67c23a;
  border-color: #95d475;
}

.status-in-progress {
  background-color: #ecf5ff;
  color: #409eff;
  border-color: #b3d8ff;
}

.status-completed {
  background-color: #e1f3d8;
  color: #67c23a;
  border-color: #95d475;
}

.status-paused {
  background-color: #fdf6ec;
  color: #e6a23c;
  border-color: #f5dab1;
}

.status-quality-check {
  background-color: #fef0f0;
  color: #f56c6c;
  border-color: #fbc4c4;
}

.content-card {
  min-height: 600px;
}

.info-section {
  margin-bottom: 30px;
}

.section-title {
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #409eff;
  border-bottom: 2px solid #409eff;
}

.info-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.info-item label {
  font-weight: bold;
  color: #606266;
  min-width: 100px;
  margin-right: 10px;
}

.info-item span {
  color: #303133;
}

.material-section {
  padding: 0;
}

.material-tabs {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
}

.material-summary {
  margin-top: 15px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
}

.report-summary {
  margin-top: 15px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
}

.return-section {
  padding: 0;
}

.return-tabs {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
}

.return-summary {
  margin-top: 15px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
}

.progress-timeline {
  padding: 20px 0;
}

.timeline-item {
  position: relative;
  padding-left: 30px;
  margin-bottom: 30px;
}

.timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 20px;
  bottom: -30px;
  width: 2px;
  background-color: #e4e7ed;
}

.timeline-dot {
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #409eff;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #409eff;
}

.timeline-content {
  background-color: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 15px;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.operator {
  font-weight: bold;
  color: #409eff;
  font-size: 16px;
}

.time {
  color: #909399;
  font-size: 14px;
}

.timeline-body {
  color: #606266;
}

.operation-type {
  font-weight: bold;
  color: #303133;
  margin-bottom: 10px;
  font-size: 14px;
}

.operation-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.detail-row {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.detail-row .label {
  font-weight: bold;
  color: #606266;
  min-width: 80px;
  margin-right: 5px;
}

.detail-row .value {
  color: #303133;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-right {
    margin-top: 15px;
  }

  .progress-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .progress-section .el-progress {
    margin: 10px 0 !important;
  }

  .action-buttons {
    flex-wrap: wrap;
  }

  .operation-details {
    grid-template-columns: 1fr;
  }
}
</style>
